<template>
  <!-- 申请达人切片用户列表 -->
  <div class="p-2">
    <!-- 达人切片信息 -->
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
      :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div class="mb-[10px]" v-show="showSearch">
        <el-card shadow="hover">
          <template #header>
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <div class="lioneuo">达人切片信息</div>
              </el-col>
            </el-row>
          </template>

          <el-row style="padding: 0 20px;">

            <el-col :span="6">
              <el-image style="width: 100%;height: 404px;"
                :src="tuinsecon.avatar " fit="contain" />
            </el-col>

            <el-col :span="2">
              <div style=" width: 30%; height: 100%; border-right: 1px solid #dddddd;"></div>
            </el-col>

            <el-col :span="15">
              <el-row style="margin-top: 20px;">
                <el-col :span="13" class="sin-line">
                  <el-tooltip content="复制达人昵称" placement="top">
                    <el-button link icon="CopyDocument" class="iconSty" @click="copyText(tuinsecon.nickname)"></el-button>
                  </el-tooltip>
                  <el-tooltip :content="tuinsecon.nickname" placement="top">
                    <span class="lioneuos">{{ tuinsecon.nickname }}</span>
                  </el-tooltip>
                </el-col>
                <el-col :span="10" :offset="1" class="sin-line">
                  <el-tooltip content="复制ID" placement="top">
                    <el-button link icon="Shop" class="iconSty" @click="copyText(tuinsecon.id)"></el-button>
                  </el-tooltip>
                  <el-tooltip :content="tuinsecon.id as string | undefined" placement="top">
                    <span class="lioneuos">{{ tuinsecon.id }}</span>
                  </el-tooltip>
                </el-col>
              </el-row>
              <el-row class="goodsCard" justify="space-evenly">
                <el-col :span="3" align="center">
                  <div>{{ tuinsecon.applyNum }}</div>
                  <div>申请人数</div>
                </el-col>
                <el-col :span="3" align="center">
                  <div>{{ tuinsecon.handleNum }}</div>
                  <div>处理中人数</div>
                </el-col>
                <el-col :span="3" align="center">
                  <div>{{ tuinsecon.successNum }}</div>
                  <div>已处理人数</div>
                </el-col>
                <el-col :span="3" align="center">
                  <div>{{ tuinsecon.rejectNum }}</div>
                  <div>已拒绝人数</div>
                </el-col>
                <el-col :span="3" align="center">
                  <div>{{ statusFilters(tuinsecon.enable) }}</div>
                  <div>达人切片状态</div>
                </el-col>
                <el-col :span="4" align="center">
                  <div>{{ tuinsecon.createTime }}</div>
                  <div>创建时间</div>
                </el-col>
                <el-col :span="24" style="border-top: 1px solid #dddddd;margin-top: 10px;">
                  <el-row justify="space-evenly">
                    <el-col :span="7" align="center">
                      <div class="huoseonc">
                        <p class="mu-row" style="width: 68%;">{{ tuinsecon.intro }}</p>
                        <el-button style="margin-left: 5%;" round @click="copyText(tuinsecon.intro)">复制</el-button>
                      </div>
                      <div class="cuionece">类目简介</div>
                    </el-col>
                    <el-col :span="7" align="center">
                      <div class="huoseonc">
                        <p class="mu-row" style="width: 68%;">{{ tuinsecon.demand }}</p>
                        <el-button style="margin-left: 5%;" round @click="copyText(tuinsecon.demand)">复制</el-button>
                      </div>
                      <div class="cuionece">切片要求</div>
                    </el-col>
                    <el-col :span="7" align="center">
                      <div class="huoseonc">
                        <p class="mu-row" style="width: 68%;">{{ tuinsecon.guide }}</p>
                        <el-button style="margin-left: 5%;" round @click="copyText(tuinsecon.guide)">复制</el-button>
                      </div>
                      <div class="cuionece">切片须知</div>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <el-row class="statistics" justify="space-evenly">
                <el-col :span="3" align="center">
                  <div>6696525%</div>
                  <div>分成比例</div>
                </el-col>
                <el-col :span="3" align="center">
                  <div>36655</div>
                  <div>近30日GMV</div>
                </el-col>
                <el-col :span="3" align="center">
                  <div>6669996</div>
                  <div>直播场次</div>
                </el-col>
                <el-col :span="3" align="center">
                  <div>69655669</div>
                  <div>商品总数</div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>

          <!-- <el-table :data="tuinsecon" max-height="550" border>
            <el-table-column label="ID" align="center" prop="id" width="180" />
            <el-table-column label="达人昵称" align="center" prop="nickname" />
            <el-table-column label="达人头像" align="center" prop="avatar" min-width="120">
              <template #default="scope">
                <el-image style="width: 80px; height: 80px"
                  :src="scope.row.avatar "
                  :preview-src-list="[scope.row.avatar]" fit="contain" :preview-teleported="true">
                  <template #error>
                    <div></div>
                  </template>
                </el-image>
              </template>
            </el-table-column>
            <el-table-column label="分成比例" align="center" prop="rate" />
            <el-table-column label="近30日GMV" align="center" prop="orderAmount" width="120" />
            <el-table-column label="直播场次" align="center" prop="liveCount" />
            <el-table-column label="商品总数" align="center" prop="goodsNum" />
            <el-table-column label="类目简介" align="center" prop="intro" />
            <el-table-column label="切片要求" align="center" prop="demand" />
            <el-table-column label="切片须知" align="center" prop="guide" />
            <el-table-column label="申请人数" align="center" prop="applyNum" />
            <el-table-column label="处理中人数" align="center" prop="handleNum" width="120" />
            <el-table-column label="已处理人数" align="center" prop="successNum" width="120" />
            <el-table-column label="已拒绝人数" align="center" prop="rejectNum" width="120" />
            <el-table-column label="状态" align="center" prop="enable">
              <template #default="scope">{{ statusFilters(scope.row.enable) }}</template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" prop="createTime" width="160" />
          </el-table> -->
        </el-card>
      </div>
    </transition>
    <!-- 头部搜索 -->
    <el-card shadow="hover">
      <template #header>
        <el-row :gutter="10" class="mb8">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <el-form-item label="状态" prop="status" style="margin-bottom: 0px;">
              <el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 90px">
                <el-option label="申请中" :value="0" />
                <el-option label="处理中" :value="1" />
                <el-option label="已处理" :value="2" />
                <el-option label="已拒绝" :value="3" />
              </el-select>
            </el-form-item>
            <el-form-item style="margin-bottom: 0px;">
              <el-button type="primary" icon="Search" @click="handleQuery()">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery()">重置</el-button>
            </el-form-item>
          </el-form>
          <!-- :columns="columns"  -->
          <right-toolbar v-model:showSearch="showSearch" :search="true" @queryTable="getList"></right-toolbar>
        </el-row>
      </template>
      <el-table :data="ordersListl" v-loading="loading">
        <el-table-column label="ID" align="center" prop="id" width="180" />
        <el-table-column label="达人切片ID" align="center" prop="sectionId" width="180" />
        <el-table-column label="用户ID" align="center" prop="userId" width="180" />
        <el-table-column label="抖音号" align="center" prop="tiktokNo" />
        <el-table-column label="抖音绑定手机号" align="center" prop="tiktokMobile" width="180" />
        <el-table-column label="状态" align="center" prop="status">
          <template #default="scope">{{ enableFilters(scope.row.status) }}</template>
        </el-table-column>
        <el-table-column label="结算账户截图" align="center" prop="settleAccountImg" width="120">
          <template #default="scope">
            <el-image style="width: 80px; height: 80px"
              :src="scope.row.settleAccountImg "
              :preview-src-list="[scope.row.settleAccountImg]" fit="contain" :preview-teleported="true">
              <template #error>
                <div></div>
              </template>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="真实姓名" align="center" prop="realName" />
        <el-table-column label="微信号" align="center" prop="wechatNo" />
        <el-table-column label="联系手机号" align="center" prop="tiktokMobile" width="180" />

        <el-table-column label="备注" align="center" prop="remark" />
        <el-table-column label="创建时间" align="center" fixed="right" prop="createTime" width="170" />

        <el-table-column label="操作" align="center" fixed="right" width="150" class-name="small-padding fixed-width"
          v-hasPermi="['gms:sectionApply:edit']">
          <template #default="scope">
            <el-tooltip content="申请处理" placement="top">
              <el-button link type="primary" icon="Open" @click="approve(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="getList" />
    </el-card>

    <!-- 申请处理对话框 -->
    <el-dialog :title="tuonsenc.title" v-model="tuonsenc.visible" width="500px" append-to-body>
      <div>
        <el-form ref="ruionseui" :model="form" :rules="rules">
          <el-form-item label="状态" prop="status" label-width="80px" v-if="tonseuin">
            <el-select v-model="form.status" placeholder="请选择" style="width: 90px">
              <el-option label="处理中" :value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="status" label-width="80px" v-else>
            <el-select v-model="form.status" placeholder="请选择" style="width: 90px">
              <el-option label="处理完成" :value="2" />
              <el-option label="处理失败" :value="3" />
            </el-select>
          </el-form-item>

          <el-form-item label="备注" prop="remark" label-width="80px">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容" v-model="form.remark"
              clearable>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="muionseui()">确 定</el-button>
          <el-button @click="huoneuic()">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="DetailSection">
import { getlostics, statisui, getdefuis } from '@/api/operates/section/index';
import { Linsecone, Huonceiet, HandleTio, CuionseVO } from '@/api/operates/section/types';
import { copyText } from '@/utils/copyText';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const columns = ref<FieldOption[]>([
  { key: 0, label: `参数主键`, visible: true, children: [] },
  { key: 1, label: `参数名称`, visible: true, children: [] },
  { key: 2, label: `参数键名`, visible: true, children: [] },
  { key: 3, label: `参数键值`, visible: true, children: [] },
  { key: 4, label: `备注`, visible: true, children: [] },
])

const initFormData: HandleTio = {
  id: '',
  status: '',
  remark: '',
}
const data = reactive<PageData<HandleTio, Linsecone>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    sectionId: '',
    status: '',
  },
  rules: {
    status: [{ required: true, message: "申请处理状态不能为空", trigger: "blur" }],
    remark: [{ required: true, message: "申请处理备注不能为空", trigger: "change" }]
  },
})
const { queryParams, form, rules } = toRefs(data)

const ordersListl = ref<Huonceiet[]>([]);
const tuinsecon = ref<CuionseVO>({
  guide: '',
  enable: 0
});
const total = ref(0);
const loading = ref(true)
const showSearch = ref(true)
const tonseuin = ref(true)
const queryFormRef = ref<ElFormInstance>();
const ruionseui = ref<ElFormInstance>();
const tuonsenc = reactive<DialogOption>({
  visible: false,
  title: '申请处理'
});

// 获取路由实例的id
const route = useRoute();
// 解构赋值
const { params: { id } } = route;

/**
 * 过滤（提现状态）
 * @param val 
 */
const statusFilters = (val: number) => {
  if (val === 1) {
    return '上架'
  } else if (val === 0) {
    return '下架'
  }
}

/**
 * 过滤（状态0=申请，1=处理中，2=处理完成，3=处理失败）
 */
const enableFilters = (val: number) => {
  if (val === 0) {
    return '申请'
  } else if (val === 1) {
    return '处理中'
  } else if (val === 2) {
    return '处理完成'
  } else if (val === 3) {
    return '处理失败'
  }
}

/**
 * 查询申请达人切片用户列表
 */
const getList = async () => {
  loading.value = true;
  queryParams.value.sectionId = id as string;
  const res = await getlostics(queryParams.value);
  ordersListl.value = res.data.list;
  total.value = res.data.total;
  loading.value = false;
}

/**
 * 搜索按钮操作
 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
}

/**
 * 重置按钮操作
 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
}

/**
 * 列表申请处理按钮
 */
const approve = async (row: Huonceiet) => {
  try {
    // console.log(row.status);
    if (row.status == 0) {
      tonseuin.value = true;
    } else if (row.status == 1) {
      tonseuin.value = false;
    }
    tuonsenc.visible = true;
    form.value.id = row.id;
  } catch (error) {
  }
}

/**
 * 申请处理的确认
 */
const muionseui = () => {
  ruionseui.value?.validate(async (valid: boolean) => {
    if (valid) {
      await statisui(form.value)
      proxy?.$modal.msgSuccess("提交成功");
      ruionseui.value?.resetFields();
      tuonsenc.visible = false;
      getList();
    }
  });
}

/**
 * 申请处理的取消
 */
const huoneuic = () => {
  ruionseui.value?.resetFields();
  tuonsenc.visible = false;
}

const wuinsei = async () => {
  let tuinseid = id as string;
  const { data } = await getdefuis(tuinseid)
  console.log(data);
  tuinsecon.value = data;
  // console.log(tuinsecon);
}

onMounted(() => {
  getList();
  wuinsei();
});

</script>


<style scoped>
.lioneuo {
  font-size: 17px;
  font-weight: 600;
}

/* 滚动条 */
.scrollbar-flex-content {
  display: flex;
  margin-top: 30px;
}

.scrollbar-demo-item {
  flex-shrink: 0;
  height: 100px;
  margin: 0 10px 15px 0;
  text-align: center;
}

/* 文本样式 */
.lioneuos {
  /* line-height: 35px; */
  font-family: 楷体;
  font-size: 20px;
}

/* 商品和店铺名前图标 */
.iconSty {
  font-size: 18px;
  padding-bottom: 5px;
}

/* 商品卡片 */
.goodsCard {
  width: 100%;
  margin-top: 25px;
  padding: 40px 0;
  background-color: #f7f8fc;
  border-radius: 30px;
}

/* 数据统计 */
.statistics {
  width: 100%;
  margin-top: 40px;
  padding-bottom: 20px;
  font-family: 楷体;
  font-size: 20px;
  border-bottom: 1px solid #dddddd;
}

/* 商品详情文本 */
.text_label {
  display: inline-block;
  /* width: 60px; */
  vertical-align: top;
  text-align-last: justify;
}

.text_value {
  display: inline-block;
  width: 75%;
}

/* 商品详情图 */
.demo-image__lazy .el-image {
  display: block;
  width: 60%;
}

/* 创意灵感 */
.clearfix {
  font-size: 17px;
  font-weight: 600;
}

.clearfix_card {
  height: 113px;
  margin: 10px 0;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 10px;
}

/* 单行省略 */
.sin-line {
  /* 第一步：让文字强制一行显示 */
  white-space: nowrap;
  /* 第二步：溢出隐藏 */
  overflow: hidden;
  /* 第三步：溢出的内容省略号显示 */
  text-overflow: ellipsis;
}

/* 多行省略 */
.mu-row {
  /* 允许单词内换行 */
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 开启盒子的弹性布局 */
  display: -webkit-box;
  /* 控制第几行出现省略号 */
  -webkit-line-clamp: 3;
  /* 设置子元素从上向下垂直排列 */
  -webkit-box-orient: vertical;
}

.huoseonc {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.cuionece {
  font-weight: 900;
  font-size: 17px;
}
</style>